<template>
  <td class="board-ceil">
    <button @click="onClicked" class="ceil__btn" :style="ceilStyle">
      <span v-if="isNumVisible" class="ceil__content"> {{ mainValue }} </span>
      <div class="ceil__candidates" v-else>
        <div
          class="ceil__candidates__item"
          v-for="(val, idx) in candidates"
          :key="idx"
        >
          <span class="ceil__candidates__item__content" v-show="val">{{
            idx + 1
          }}</span>
        </div>
      </div>
    </button>
  </td>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator'

@Component
export default class GameBoardCeil extends Vue {
  // if -1, not visible
  @Prop({ default: -1 }) private readonly mainValue!: number
  @Prop({ default: 'black' }) private readonly color!: string
  @Prop({ default: 0 }) private readonly rowIdx!: number
  @Prop({ default: 0 }) private readonly colIdx!: number
  @Prop()
  private readonly candidates!: boolean[]

  constructor() {
    super()
  }

  get isNumVisible(): boolean {
    return this.mainValue != -1
  }

  get ceilStyle() {
    return {
      color: this.color
    }
  }

  @Emit('click')
  onClicked() {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
$border-color: salmon;
$outborder-width: 1.5px;
// $border-color: black;
.board-ceil {
  .ceil__btn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
  }
}

.ceil__content {
  font-size: 1.2em;
  font-weight: bold;
  transition: all 200ms;
}

.ceil__candidates {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;

  &__item {
    text-align: center;
    font-size: 0.5em;
    color: black;

    &__content {
      transition: all 200ms;
    }
  }
}
</style>
